<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/icon.png"><title>DOM&&BOM | FYJ</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/assets/app-5e55c3a9.js"><link rel="modulepreload" href="/assets/framework-9675d465.js"><link rel="modulepreload" href="/assets/DOM__BOM.html-b97d346f.js"><link rel="modulepreload" href="/assets/DOM__BOM.html-518d085e.js"><link rel="prefetch" href="/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/assets/index.html-3d8b60b2.js" as="script"><link rel="prefetch" href="/assets/index.html-a7cfb774.js" as="script"><link rel="prefetch" href="/assets/index.html-1a66ce3d.js" as="script"><link rel="prefetch" href="/assets/index.html-a2322c32.js" as="script"><link rel="prefetch" href="/assets/index.html-2b8e88d2.js" as="script"><link rel="prefetch" href="/assets/index.html-36817084.js" as="script"><link rel="prefetch" href="/assets/index.html-c05495db.js" as="script"><link rel="prefetch" href="/assets/index.html-3cf0f594.js" as="script"><link rel="prefetch" href="/assets/index.html-33a8693c.js" as="script"><link rel="prefetch" href="/assets/index.html-80880afd.js" as="script"><link rel="prefetch" href="/assets/index.html-df5b0273.js" as="script"><link rel="prefetch" href="/assets/index.html-d608509e.js" as="script"><link rel="prefetch" href="/assets/index.html-ac9bff28.js" as="script"><link rel="prefetch" href="/assets/index.html-d251d55d.js" as="script"><link rel="prefetch" href="/assets/index.html-d299a2c9.js" as="script"><link rel="prefetch" href="/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/assets/index.html-ce42ac51.js" as="script"><link rel="prefetch" href="/assets/index.html-e1e2c2da.js" as="script"><link rel="prefetch" href="/assets/index.html-49c6b4a8.js" as="script"><link rel="prefetch" href="/assets/index.html-3880c1f3.js" as="script"><link rel="prefetch" href="/assets/index.html-b5b12757.js" as="script"><link rel="prefetch" href="/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/assets/index.html-d7cf9c00.js" as="script"><link rel="prefetch" href="/assets/git.html-0da1c675.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-4654ddc1.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-54f235b4.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-a3fbc3f8.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-6c330c31.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-17e205d8.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-08b53360.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-3208ecf3.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-7baa2b76.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-ad7d95ea.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-31658686.js" as="script"><link rel="prefetch" href="/assets/express.html-042999ef.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-abaf3902.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-9408a820.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-8df1574a.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-72c9480b.js" as="script"><link rel="prefetch" href="/assets/promise.html-85e3fffc.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-a09bf01e.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-86d8c25d.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-86b29b9f.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-67d4835d.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-932412c5.js" as="script"><link rel="prefetch" href="/assets/typescript.html-0bd71496.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-09f47896.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-10c04317.js" as="script"><link rel="prefetch" href="/assets/vue2.html-82b6d2df.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-56d49820.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-3ffca1f7.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-e24f4da6.js" as="script"><link rel="prefetch" href="/assets/api.html-b73a9946.js" as="script"><link rel="prefetch" href="/assets/home.html-746a4c0d.js" as="script"><link rel="prefetch" href="/assets/plugin.html-6a7b36ed.js" as="script"><link rel="prefetch" href="/assets/theme.html-6037defd.js" as="script"><link rel="prefetch" href="/assets/121501.html-8973c891.js" as="script"><link rel="prefetch" href="/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/assets/index.html-101169bd.js" as="script"><link rel="prefetch" href="/assets/index.html-c05f203a.js" as="script"><link rel="prefetch" href="/assets/index.html-0c6bc7be.js" as="script"><link rel="prefetch" href="/assets/index.html-0fe42912.js" as="script"><link rel="prefetch" href="/assets/index.html-35698f58.js" as="script"><link rel="prefetch" href="/assets/index.html-a9998c9a.js" as="script"><link rel="prefetch" href="/assets/index.html-e03acce1.js" as="script"><link rel="prefetch" href="/assets/index.html-936bfd18.js" as="script"><link rel="prefetch" href="/assets/index.html-3b167d99.js" as="script"><link rel="prefetch" href="/assets/index.html-6a7e33f2.js" as="script"><link rel="prefetch" href="/assets/index.html-00dc6c81.js" as="script"><link rel="prefetch" href="/assets/index.html-c386c5b9.js" as="script"><link rel="prefetch" href="/assets/index.html-62cab89d.js" as="script"><link rel="prefetch" href="/assets/index.html-c6f54c68.js" as="script"><link rel="prefetch" href="/assets/index.html-5fc54677.js" as="script"><link rel="prefetch" href="/assets/index.html-96867bd4.js" as="script"><link rel="prefetch" href="/assets/index.html-452a2070.js" as="script"><link rel="prefetch" href="/assets/index.html-500c2666.js" as="script"><link rel="prefetch" href="/assets/index.html-d797d831.js" as="script"><link rel="prefetch" href="/assets/index.html-84073cb9.js" as="script"><link rel="prefetch" href="/assets/index.html-8dfee4a9.js" as="script"><link rel="prefetch" href="/assets/index.html-a675820e.js" as="script"><link rel="prefetch" href="/assets/index.html-948f048e.js" as="script"><link rel="prefetch" href="/assets/index.html-522daa8a.js" as="script"><link rel="prefetch" href="/assets/index.html-4d67ded2.js" as="script"><link rel="prefetch" href="/assets/index.html-8caf183d.js" as="script"><link rel="prefetch" href="/assets/git.html-9cef5060.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-cd096af4.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-4e591000.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-f1c6b5c4.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-0ce3d86b.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-174a11fd.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-12f7f1aa.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-e15be5a7.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-993374db.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-06aa4d45.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-f6a2c1e1.js" as="script"><link rel="prefetch" href="/assets/express.html-c34de6a8.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-393ba2a3.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-84b55eda.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-2ee518f3.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-fabb53b0.js" as="script"><link rel="prefetch" href="/assets/promise.html-34216aec.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-aac8da2d.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-1540a73e.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-d4dece61.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-2cfeca4a.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-4c95566c.js" as="script"><link rel="prefetch" href="/assets/typescript.html-3e2bf303.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-fa748c7b.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-b4107b02.js" as="script"><link rel="prefetch" href="/assets/vue2.html-dfda70b7.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-4cf781c8.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-a5f191aa.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-68ef32c1.js" as="script"><link rel="prefetch" href="/assets/api.html-710c8c92.js" as="script"><link rel="prefetch" href="/assets/home.html-b45de374.js" as="script"><link rel="prefetch" href="/assets/plugin.html-2075a048.js" as="script"><link rel="prefetch" href="/assets/theme.html-5b5f0e80.js" as="script"><link rel="prefetch" href="/assets/121501.html-865346dc.js" as="script"><link rel="prefetch" href="/assets/404.html-eab7b035.js" as="script"><link rel="prefetch" href="/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/assets/style-887583e0.css" as="style"><link rel="stylesheet" href="/assets/style-887583e0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><div class="nav-item navbar-links-wrapper" style=""><div><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div><nav class="navbar-links"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">DOM&amp;&amp;BOM</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->fyj<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2023/04/30<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->javascript-note<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->JavaScript<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h1 id="_1、节点操作" tabindex="-1"><a class="header-anchor" href="#_1、节点操作" aria-hidden="true">#</a> 1、节点操作</h1><h3 id="_1-1dom节点" tabindex="-1"><a class="header-anchor" href="#_1-1dom节点" aria-hidden="true">#</a> 1.1DOM节点</h3><p>DOM节点： DOM树里每一个内容都称之为节点</p><p>节点类型 元素节点：(1)所有的标签 比如 body、 div (2)html 是根节点 属性节点: 所有的属性 比如 href 文本节点：所有的文本 其他</p><h3 id="_1-2查找节点" tabindex="-1"><a class="header-anchor" href="#_1-2查找节点" aria-hidden="true">#</a> 1.2查找节点</h3><p>关闭二维码案例： 点击关闭按钮， 关闭的是二维码的盒子， 还要获取erweima盒子</p><p>思考：  关闭按钮 和 erweima 是什么关系呢？  父子关系  所以，我们完全可以这样做：  点击关闭按钮， 直接关闭它的爸爸，就无需获取erweima元素了</p><p>节点关系：  父节点  子节点  兄弟节点</p><p><strong>父节点查找：</strong></p><p>parentNode属性</p><p>返回最近一级得父节点 找不到返回为null</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>子元素<span class="token punctuation">.</span>parentNode
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>子节点查找</strong></p><p>childNodes:获得所有子节点、包括文本节点（空格、换行）、注释节点等</p><p><strong>children(重点)</strong></p><p>仅获得所有元素节点</p><p>返回的还是一个伪数组</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>父元素<span class="token punctuation">.</span>children
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>兄弟关系查找</strong></p><p>1.下一个兄弟节点</p><p>nextElementsSibling属性</p><p>2.上一个兄弟节点</p><p>previousElementSibling属性</p><h3 id="_1-3增加节点" tabindex="-1"><a class="header-anchor" href="#_1-3增加节点" aria-hidden="true">#</a> 1.3增加节点</h3><p>很多情况下，我们需要在页面中增加元素  比如，点击发布按钮，可以新增一条信息</p><p>一般情况下，我们新增节点，按照如下操作：  创建一个新的节点  把创建的新的节点放入到指定的元素内部</p><p><strong>1.创建节点</strong></p><p>创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点</p><p>创建元素节点方法：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;标签名&#39;</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>2.追加节点</strong></p><p>要想在界面看到，还得插入到某个父元素中</p><p>插入到父元素得最后一个子元素</p><p><strong>注意：innerHTML会重新渲染页面，相当于又生成了一个dom所以原来绑定的事件会失效，看情况使用</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>父元素<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>要插入的元素<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p> 插入到父元素中某个子元素的前面</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>父元苏素<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>要插入的元素<span class="token punctuation">,</span>在哪个元素前面<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>3.克隆节点</strong></p><p>元素.cloneNode(布尔值)</p><p>若为true，则代表克隆时会包含后代节点一起克隆  若为false，则代表克隆时不包含后代节点  默认为false</p><h3 id="_1-4删除节点" tabindex="-1"><a class="header-anchor" href="#_1-4删除节点" aria-hidden="true">#</a> 1.4删除节点</h3><p>若一个节点在页面中已不需要时，可以删除它</p><p>在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除</p><p>语法：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>父元素<span class="token punctuation">.</span>removeChild（要删除的元素）
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p> 注：  如不存在父子关系则删除不成功  删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点</p><h1 id="_2、时间对象" tabindex="-1"><a class="header-anchor" href="#_2、时间对象" aria-hidden="true">#</a> 2、时间对象</h1><h3 id="_2-1实例化" tabindex="-1"><a class="header-anchor" href="#_2-1实例化" aria-hidden="true">#</a> 2.1实例化</h3><p>在代码中发现了 new 关键字时，一般将这个操作称为实例化 创建一个时间对象并获取时间</p><p>获得当前时间</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>获得指定时间</p><div class="language-javas line-numbers-mode" data-ext="javas"><pre class="language-javas"><code>let date = new Date(&#39;1949-10-01&#39;)
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="_2-2时间对象方法" tabindex="-1"><a class="header-anchor" href="#_2-2时间对象方法" aria-hidden="true">#</a> 2.2时间对象方法</h3><p>因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式</p><ol><li><strong>getFullYear() 获得年份 获取四位年份</strong></li><li><strong>getMonth() 获得月份 取值为 0 ~ 11</strong></li><li><strong>getDate() 获取月份中的每一天 不同月份取值也不相同</strong></li><li><strong>getDay() 获取星期 取值为 0 ~ 6</strong></li><li><strong>getHours() 获取小时 取值为 0 ~ 23</strong></li><li><strong>getMinutes() 获取分钟 取值为 0 ~ 59</strong></li><li><strong>getSeconds() 获取秒 取值为 0 ~ 59</strong></li></ol><h3 id="_2-3时间戳" tabindex="-1"><a class="header-anchor" href="#_2-3时间戳" aria-hidden="true">#</a> 2.3时间戳</h3><p>什么是时间戳  是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式</p><p>三种方式获取时间戳</p><ol><li><p>使用 getTime() 方法</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//1.实例化</span>
<span class="token keyword">let</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">//2.获取时间</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span>getTime<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>​</p></li><li><p><strong>简写 +new Date()</strong></p></li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ol><li><p>使用 Date().now()</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>无需实例化 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳</p></li></ol><h1 id="_3、重绘和回流" tabindex="-1"><a class="header-anchor" href="#_3、重绘和回流" aria-hidden="true">#</a> 3、重绘和回流</h1><h3 id="_1-浏览器是如何进行界面渲染的" tabindex="-1"><a class="header-anchor" href="#_1-浏览器是如何进行界面渲染的" aria-hidden="true">#</a> 1.浏览器是如何进行界面渲染的</h3><p> 解析（Parser）HTML，生成DOM树(DOM Tree)  同时解析（Parser） CSS，生成样式规则 (Style Rules)  根据DOM树和样式规则，生成渲染树(Render Tree)  进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）  进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制  Display: 展示在页面上</p><h3 id="_2-重绘和回流-重排" tabindex="-1"><a class="header-anchor" href="#_2-重绘和回流-重排" aria-hidden="true">#</a> 2.重绘和回流(重排)</h3><p> 回流(重排) 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过 程称为 回流。  重绘 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。</p><p><strong>重绘不一定引起回流，而回流一定会引起重绘</strong></p><p> 会导致回流（重排）的操作：  页面的首次刷新  浏览器的窗口大小发生改变  元素的大小或位置发生改变  改变字体的大小  内容的变化（如：input框的输入，图片的大小）  激活css伪类 （如：:hover）  脚本操作DOM（添加或者删除可见的DOM元素） 简单理解影响到布局了，就会有回</p><h1 id="_4、滚动事件和加载事件" tabindex="-1"><a class="header-anchor" href="#_4、滚动事件和加载事件" aria-hidden="true">#</a> 4、滚动事件和加载事件</h1><h3 id="_1-1滚动事件" tabindex="-1"><a class="header-anchor" href="#_1-1滚动事件" aria-hidden="true">#</a> 1.1滚动事件</h3><p>当页面进行滚动时触发的事件 <strong>为什么要学？</strong> 很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部 事件名：scroll 监听整个页面滚动：</p><p>给 window 或 document 添加 scroll 事件</p><p>监听某个元素的内部滚动直接给某个元素加即可</p><div class="language-java line-numbers-mode" data-ext="java"><pre class="language-java"><code><span class="token comment">//页面滚动事件</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token char">&#39;scroll&#39;</span><span class="token punctuation">,</span><span class="token function">function</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> 
	<span class="token comment">//执行的操作</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-2-加载事件" tabindex="-1"><a class="header-anchor" href="#_1-2-加载事件" aria-hidden="true">#</a> 1.2 加载事件</h3><p>加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件</p><p><strong>为什么要学？</strong>  有些时候需要等页面资源全部处理完了做一些事情  老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到</p><p>事件名：load</p><p><strong>监听页面所有资源加载完毕：</strong>  给 window 添加 load 事件</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//页面加载事件</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;load&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> 
	<span class="token comment">//执行的操作</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件</p><p>当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载</p><p><strong>事件名：DOMContentLoaded</strong></p><p> 监听页面DOM加载完毕：  给 document 添加 DOMContentLoaded 事件</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;DOMContentLoaded &#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> 
	<span class="token comment">//执行的操作</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="_5、元素大小和位置" tabindex="-1"><a class="header-anchor" href="#_5、元素大小和位置" aria-hidden="true">#</a> 5、元素大小和位置</h1><h3 id="_2-1scroll家族" tabindex="-1"><a class="header-anchor" href="#_2-1scroll家族" aria-hidden="true">#</a> 2.1scroll家族</h3><p>使用场景： 我们想要页面滚动一段距离，比如100px，就让某些元素 显示隐藏，那我们怎么知道，页面滚动了100像素呢？ 就可以使用scroll 来检测页面滚动的距离~~~</p><p><strong> 获取宽高：</strong>  获取元素的内容总宽高（不包含滚动条）返回值不带单位  scrollWidth和scrollHeight</p><p><strong>获取位置:</strong>  获取元素内容往左、往上滚出去看不到的距离  scrollLeft和scrollTop  这两个属性是可以修改的</p><p>开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//页面滚动事件</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;scroll&#39;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> 
	<span class="token comment">//document.documentElement.scrollTop 获得当前页面被卷去的头部</span>
    <span class="token keyword">let</span> num <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>注意事项</strong></p><p>document.documentElement HTML 文档返回对象为HTML元素</p><p><img src="/javascriptImages/DOM&amp;&amp;&amp;BOW1.png" alt=""></p><h3 id="_2-2-offset家族" tabindex="-1"><a class="header-anchor" href="#_2-2-offset家族" aria-hidden="true">#</a> 2.2 offset家族</h3><p> 使用场景： 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。 简单说，就是通过js的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置， 就可以返回顶部的小盒子显示</p><p><strong>获取宽高：</strong>  获取元素的自身宽高、包含元素自身设置的宽高、padding、border  offsetWidth和offsetHeight <strong> 获取位置：</strong>  获取元素距离自己<strong>定位父级元素</strong>的左、上距离  <strong>offsetLeft和offsetTop 注意是只读属性</strong></p><h3 id="_2-3-client家族" tabindex="-1"><a class="header-anchor" href="#_2-3-client家族" aria-hidden="true">#</a> 2.3 client家族</h3><p><strong> 获取宽高：</strong>  获取元素的可见部分宽高（不包含边框，滚动条等）  clientWidth和clientHeight <strong> 获取位置：</strong>  获取左边框和上边框宽度  clientLeft和clientTop 注意是只读属性</p><p>会在窗口尺寸改变的时候触发事件：  resize</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;resize&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> 
	<span class="token comment">//执行的代码</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>检测屏幕宽度：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;resize&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> 
	<span class="token keyword">let</span> w <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>w<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="_6、window对象" tabindex="-1"><a class="header-anchor" href="#_6、window对象" aria-hidden="true">#</a> 6、window对象</h1><h3 id="_1-1bom" tabindex="-1"><a class="header-anchor" href="#_1-1bom" aria-hidden="true">#</a> 1.1BOM</h3><p>BOM(Browser Object Model ) 是浏览器对象模型</p><p><img src="/javascriptImages/DOM&amp;&amp;&amp;BOW2.png" alt=""></p><p>window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的</p><p> window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）</p><p> document 是实现 DOM 的基础，它其实是依附于 window 的属性。</p><p>注：依附于 window 对象的所有属性和方法，使用时可以省略 window</p><h3 id="_1-2-定时器-延时函数" tabindex="-1"><a class="header-anchor" href="#_1-2-定时器-延时函数" aria-hidden="true">#</a> 1.2 定时器-延时函数</h3><p> JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>setTimeout（回调函数，等待的毫秒数）
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p> setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window</p><p> 清除延时函数：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> timer <span class="token operator">=</span> setTimeout（回调函数，等待的毫秒数）
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p> 结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;box&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">let</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.box&#39;</span><span class="token punctuation">)</span>
 <span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            div<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
     	clock<span class="token punctuation">.</span>innerText <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
     	<span class="token comment">//延时任务，自调用</span>
            <span class="token function">setTimeout</span><span class="token punctuation">(</span>fn
                <span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>两种定时器对比：</p><p> setInterval 的特征是重复执行，首次执行会延时  setTimeout 的特征是延时执行，只执行 1 次  setTimeout 结合递归函数，能模拟 setInterval 重复执行  clearTimeout 清除由 setTimeout 创建的定时任务</p><h3 id="_1-3-js-执行机制" tabindex="-1"><a class="header-anchor" href="#_1-3-js-执行机制" aria-hidden="true">#</a> 1.3 JS 执行机制</h3><p><strong>经典面试题</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1111</span><span class="token punctuation">)</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> 
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2222</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3333</span><span class="token punctuation">)</span>

<span class="token number">1111</span> <span class="token number">3333</span> <span class="token number">2222</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1111</span><span class="token punctuation">)</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> 
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2222</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3333</span><span class="token punctuation">)</span>

<span class="token number">1111</span> <span class="token number">3333</span> <span class="token number">2222</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>JS 是单线程</strong></p><p>JavaScript 语言的一大特点就是<strong>单线程，<strong>也就是说，同一个时间只能做一件事。这是因为 Javascript 这 门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比 如我们对某个 DOM 元素</strong>进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。</strong></p><p>单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问 题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。</p><p><strong>同步和异步</strong></p><p>为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。</p><p><strong>同步</strong> 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步 做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。</p><p><strong>异步</strong> 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事 情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。</p><p><strong>他们的本质区别： 这条流水线上各个流程的执行顺序不同。</strong></p><p><strong>同步任务</strong> 同步任务都在主线程上执行，形成一个执行栈。</p><p><strong>异步任务</strong> JS 的异步是通过回调函数实现的。 一般而言，异步任务有以下三种类型: 1、普通事件，如 click、resize 等 2、资源加载，如 load、error 等 3、定时器，包括 setInterval、setTimeout 等 异步任务相关添加到任务队列中（任务队列也称为消息队列）。</p><ol><li>先执行执行栈中的同步任务。</li><li>异步任务放入任务队列中。</li><li>一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。</li></ol><p><img src="/javascriptImages/DOM&amp;&amp;&amp;BOW3.png" alt=""></p><p>由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。</p><h3 id="_1-4-location对象" tabindex="-1"><a class="header-anchor" href="#_1-4-location对象" aria-hidden="true">#</a> 1.4 location对象</h3><p> location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分 <strong> 常用属性和方法：</strong>  href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转  search 属性获取地址中携带的参数，符号 ？后面部分  hash 属性获取地址中的啥希值，符号 # 后面部分  reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新  location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分 <strong> 常用属性和方法：</strong>  href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//可以得到当前文件URL地址</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>href<span class="token punctuation">)</span>
<span class="token comment">//可以通过js方式跳转到目标地址</span>
location<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">&#39;http://www.itcast.cn&#39;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>5秒之后跳转的页面</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">&quot;&quot;</span><span class="token operator">&gt;</span>支付成功，<span class="token operator">&lt;</span>span<span class="token operator">&gt;</span><span class="token number">5</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>秒之后跳转<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        <span class="token keyword">let</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;a&#39;</span><span class="token punctuation">)</span>
        <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">5</span>
        <span class="token keyword">let</span> timer <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            num<span class="token operator">--</span>
            a<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">支付成功，&lt;span&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>num<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/span&gt;秒之后跳转</span><span class="token template-punctuation string">`</span></span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>num <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">clearInterval</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
                location<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">&#39;http://www.iciba.com/&#39;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p> location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分 <strong> 常用属性和方法：</strong>  search 属性获取地址中携带的参数，符号 ？后面部分</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>search<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p> 常用属性和方法：  hash 属性获取地址中的哈希值，符号 # 后面部分</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>hash<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如 网易云音乐</p><p>常用属性和方法：  reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>button<span class="token operator">&gt;</span>点击刷新<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        <span class="token keyword">let</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;button&#39;</span><span class="token punctuation">)</span>
        btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-5-navigator对象" tabindex="-1"><a class="header-anchor" href="#_1-5-navigator对象" aria-hidden="true">#</a> 1.5 navigator对象</h3><p> navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息 <strong> 常用属性和方法：</strong>  通过 userAgent 检测浏览器的版本及平台</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 检测 userAgent（浏览器信息）</span>
<span class="token operator">!</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> userAgent <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent
<span class="token comment">// 验证是否为Android或iPhone</span>
<span class="token keyword">const</span> android <span class="token operator">=</span> userAgent<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(Android);?[\s\/]+([\d.]+)?</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
<span class="token keyword">const</span> iphone <span class="token operator">=</span> userAgent<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(iPhone\sOS)\s([\d_]+)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
<span class="token comment">// 如果是Android或iPhone，则跳转至移动站点</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>android <span class="token operator">||</span> iphone<span class="token punctuation">)</span> <span class="token punctuation">{</span>
location<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">&#39;http://m.itcast.cn&#39;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-6-histroy对象" tabindex="-1"><a class="header-anchor" href="#_1-6-histroy对象" aria-hidden="true">#</a> 1.6 histroy对象</h3><p>history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等</p><p>常用属性和方法：</p><p><img src="/javascriptImages/DOM&amp;&amp;&amp;BOW4.png" alt=""></p><p>history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。</p><h1 id="_7、swiper" tabindex="-1"><a class="header-anchor" href="#_7、swiper" aria-hidden="true">#</a> 7、swiper</h1><h3 id="_2-1-插件" tabindex="-1"><a class="header-anchor" href="#_2-1-插件" aria-hidden="true">#</a> 2.1 插件</h3><p> 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果  学习插件的基本过程  熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/  看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html  查看基本使用流程 https://www.swiper.com.cn/usage/index.html  查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html  注意: 多个swiper同时使用的时候, 类名需要注意区分</p><h1 id="_8、本地存储" tabindex="-1"><a class="header-anchor" href="#_8、本地存储" aria-hidden="true">#</a> 8、本地存储</h1><h3 id="_3-1-本地存储特性" tabindex="-1"><a class="header-anchor" href="#_3-1-本地存储特性" aria-hidden="true">#</a> 3.1 本地存储特性</h3><p>随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在 本地存储大量的数据，HTML5规范提出了相关解决方案。 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage和localStorage约 5M 左右</p><h3 id="_3-2-localstorage" tabindex="-1"><a class="header-anchor" href="#_3-2-localstorage" aria-hidden="true">#</a> 3.2 localStorage</h3><p>1、生命周期永久生效，除非手动删除 否则关闭页面也会存在 2、可以多窗口（页面）共享（同一浏览器可以共享） 3、以键值对的形式存储使用</p><p><strong>存储数据：</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span>value<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>获取数据：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>删除数据：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>localStorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>存储复杂数据类型存储</strong> 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地 <strong>JSON.stringify(复杂数据类型)</strong>  将复杂数据转换成JSON字符串 <strong>存储</strong> 本地存储中 <strong>JSON.parse(JSON字符串)</strong>  将JSON字符串转换成对象 <strong>取出</strong> 时候使用</p><h3 id="_3-3-sessionstorage-了解" tabindex="-1"><a class="header-anchor" href="#_3-3-sessionstorage-了解" aria-hidden="true">#</a> 3.3 sessionStorage（了解）</h3><p>1、生命周期为关闭浏览器窗口 2、在同一个窗口(页面)下数据可以共享 3、以键值对的形式存储使用 4、用法跟localStorage 基本相同</p><h1 id="_9、正则表达式" tabindex="-1"><a class="header-anchor" href="#_9、正则表达式" aria-hidden="true">#</a> 9、正则表达式</h1><h3 id="_1-1什么是正则表达式" tabindex="-1"><a class="header-anchor" href="#_1-1什么是正则表达式" aria-hidden="true">#</a> 1.1什么是正则表达式</h3><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象</p><p>通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。</p><p> 正则表达式在 JavaScript中的使用场景：  例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)  比如用户名: /^[a-z0-9_-]{3,16}$/  过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。</p><h3 id="_1-2语法" tabindex="-1"><a class="header-anchor" href="#_1-2语法" aria-hidden="true">#</a> 1.2语法</h3><p> 我们想要查找是否有戴眼镜的人, 怎么做呢？</p><ol><li><p>定义规则： 戴眼镜的</p></li><li><p>根据规则去查找：找到则返回  正则同样道理，我们分为两步：</p></li><li><p>定义规则</p></li><li><p>查找</p><p>比如：查找下面文本中是否包含字符串 &#39;前端&#39;</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&#39;IT培训,前端开发培训,web前端培训,软件测试培训,产品经理培训&#39;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">前端</span><span class="token regex-delimiter">/</span></span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p> JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：</p></li></ol><p>定义正则表达式语法：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> 变量名 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">表达式</span><span class="token regex-delimiter">/</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p> 其中 / / 是正则表达式字面量</p><p>比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">前端</span><span class="token regex-delimiter">/</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p> JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法： 2.判断是否有符合规则的字符串： test() 方法 用来查看正则表达式与指定的字符串是否匹配</p><p>语法：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>regObj<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>被检测的字符串<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&#39;IT培训,前端开发培训,web前端培训,软件测试培训,产品经理培训&#39;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">前端</span><span class="token regex-delimiter">/</span></span>
<span class="token keyword">let</span> re <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>re<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.检索（查找）符合规则的字符串： exec() 方法 在一个指定字符串中执行一个搜索匹配</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>regObj<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>被检测的字符串<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&#39;IT培训,前端开发培训,web前端培训,软件测试培训,产品经理培训&#39;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">前端</span><span class="token regex-delimiter">/</span></span>
<span class="token keyword">let</span> re <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>re<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果匹配成功，exec() 方法返回一个数组，否则返回null</p><h3 id="_1-3-元字符" tabindex="-1"><a class="header-anchor" href="#_1-3-元字符" aria-hidden="true">#</a> 1.3 元字符</h3><p> 普通字符: 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。 也就是说普通字符只能够匹配字符串中与它们相同的字符。  元字符(特殊字符） 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。  比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..  但是换成元字符写法： [a-z] 参考文档：  MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions  正则测试工具: http://tool.oschina.net/regex</p><p>为了方便记忆和学习，我们对众多的元字符进行了分类：</p><ol><li><p>边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）</p></li><li><p>量词 （表示重复次数）</p></li><li><p>字符类 （比如 \d 表示 0~9）</p></li><li><p>边界符 正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符</p><p>^：表示匹配行首的文本（以谁开始）</p><p>$：表示匹配行尾的文本（以谁结束）</p></li><li><p>量词</p><p>量词用来 设定某个模式出现的次数</p></li></ol><p><img src="/javascriptImages/DOM&amp;&amp;&amp;BOW5.png" alt=""></p><p><strong>注意： 逗号左右两侧千万不要出现空格</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// *表示重复0次或者更多次</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈*$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈*$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈*$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        <span class="token comment">// +表示重复1次或者更多次</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈+$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈+$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈+$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        <span class="token comment">// ?表示重复0次或者1次</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code> <span class="token comment">// {n}表示重复n次</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
        <span class="token comment">// {n,}表示 &gt;= n 的意思</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        <span class="token comment">// {n,m}表示 &gt;= n &lt;=m 的意思</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,4}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,4}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,4}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,4}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,4}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^哈{2,4}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;哈哈哈哈哈&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li><p>字符类：</p><p>[ ] 匹配字符集合后面的字符串只要包含 abc 中任意一个字符，都返回 true</p></li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[abc]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;andy&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[abc]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;baby&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[abc]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;cry&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[abc]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;die&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//false</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>[ ] 里面加上 - 连字符，使用连字符 - 表示一个范围</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-z]$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;c&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p> 比如：  [a-z] 表示 a 到 z 26个英文字母都可以  [a-zA-Z] 表示大小写都可以  [0-9] 表示 0~9 的数字都可以</p><p>(1) [ ] 里面加上 ^ 取反符号  比如：  [^a-z] 匹配除了小写字母以外的字符  注意要写到中括号里面</p><p>（2） . 匹配除换行符之外的任何单个字符</p><p><img src="/javascriptImages/DOM&amp;&amp;&amp;BOW6.png" alt=""></p><p>修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等</p><p>i 是单词 ignore 的缩写，正则匹配时字母不区分大小写 g 是单词 global 的缩写，匹配所有满足正则表达式的结果</p><p><img src="/javascriptImages/DOM&amp;&amp;&amp;BOW7.png" alt=""></p><p>替换 replace 替换 语法：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>字符串<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token operator">/</span>正则表达式<span class="token operator">/</span>，<span class="token string">&#39;替换的文本&#39;</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023/5/1 13:50:48<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-1dom节点" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1DOM节点"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1DOM节点<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-2查找节点" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2查找节点"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2查找节点<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-3增加节点" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3增加节点"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3增加节点<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-4删除节点" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.4删除节点"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.4删除节点<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_2-1实例化" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1实例化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1实例化<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_2-2时间对象方法" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.2时间对象方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.2时间对象方法<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_2-3时间戳" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.3时间戳"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.3时间戳<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-浏览器是如何进行界面渲染的" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.浏览器是如何进行界面渲染的"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.浏览器是如何进行界面渲染的<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_2-重绘和回流-重排" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.重绘和回流(重排)"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.重绘和回流(重排)<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-1滚动事件" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1滚动事件"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1滚动事件<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-2-加载事件" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2 加载事件"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2 加载事件<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_2-1scroll家族" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1scroll家族"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1scroll家族<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_2-2-offset家族" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.2 offset家族"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.2 offset家族<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_2-3-client家族" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.3 client家族"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.3 client家族<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-1bom" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1BOM"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1BOM<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-2-定时器-延时函数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2 定时器-延时函数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2 定时器-延时函数<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-3-js-执行机制" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3 JS 执行机制"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3 JS 执行机制<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-4-location对象" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.4 location对象"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.4 location对象<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-5-navigator对象" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5 navigator对象"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5 navigator对象<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-6-histroy对象" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.6 histroy对象"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.6 histroy对象<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_2-1-插件" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1 插件"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1 插件<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_3-1-本地存储特性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.1 本地存储特性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.1 本地存储特性<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_3-2-localstorage" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.2 localStorage"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.2 localStorage<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_3-3-sessionstorage-了解" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.3 sessionStorage（了解）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.3 sessionStorage（了解）<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-1什么是正则表达式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1什么是正则表达式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1什么是正则表达式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-2语法" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2语法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2语法<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/DOM__BOM.html#_1-3-元字符" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3 元字符"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3 元字符<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/assets/app-5e55c3a9.js" defer></script>
  </body>
</html>
